<script setup lang="ts">
  defineOptions({
    name: 'HeaderReturnFactoryModuleDetail',
  })

  const props = defineProps({
    moduleId: {
      type: String,
      required: true,
    },
    moduleName: {
      type: String,
      required: true,
    },
    moduleStatus: {
      type: Boolean,
      default: () => true,
    },
  })

  const emits = defineEmits<{
    (e: 'edit'): void
    (e: 'del'): void
  }>()
</script>

<template>
  <div class="header-return-factory-module-detail">
    <div class="title-wrapper">
      <i class="iconfont icon-detail"></i>
      <div class="text">
        <div class="main-title">返厂模块名称：</div>
        <div class="sub-title">{{ props.moduleName }}</div>
      </div>
      <h-status v-if="props.moduleStatus">启用</h-status>
      <h-status v-else type="info">禁用</h-status>
    </div>
    <div class="btn-group">
      <h-plain-button @click="emits('edit')">编辑</h-plain-button>
      <h-plain-button type="error" @click="emits('del')">删除</h-plain-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .header-return-factory-module-detail {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-wrapper {
      display: flex;
      column-gap: 5px;
      align-items: center;

      .iconfont {
        color: $primaryColor;
      }

      .text {
        display: flex;
        font-size: 14px;

        .main-title {
          font-weight: bold;
        }
      }
    }

    .btn-group {
      display: flex;
      column-gap: 5px;
    }
  }
</style>
